<script lang="ts">
import Vue from 'vue'
import navBar from "@/components/nav-bar/nav-bar.vue";
import tips from "@/utils/tips";
import {copyFun, getPrice, getTypeImage, isMoreThanOneDay} from "@/utils/utils";
import {mapState} from "vuex";
import {getOrders} from "@/services/order";

export default Vue.extend({
  name: "order",
  components: {navBar},
  data() {
    return {
      orderList: [],

      showPage1: true,   // 一开始设置为显示

      currentTabs: 2,

      // 上拉加载
      loading: false,   // 加载状态
      hasMore: true,
      current: 1,   // 当前页码
      pageSize: 10, // 当前页面每页数量
      scrollTop: 0,
      old: {
        scrollTop: 0
      }
    }
  },
  computed: {
    ...mapState(["systemInfo"]),
    lang(): any {
      return this.$t('order');
    }
  },
  onLoad(query?: AnyObject) {
    this.getOrdersDataList(2)
  },

  methods: {
    copyFun,
    getPrice,
    getTypeImage,
    isMoreThanOneDay,
    async getOrdersDataList(state: number) {
      this.loading = true;
      const {pageSize, current} = this
      uni.showLoading({title: '加载中...'})
      try {
        const {code, data: {data, meta}} = await getOrders(state, current, pageSize);
        if (code === 200) {
          const {current_page, last_page, next_page} = meta;

          this.current = next_page;
          this.orderList = [...this.orderList, ...data];
          // 更新是否还有更多数据的标志
          if (current_page >= last_page) {
            this.hasMore = false;
            console.log('this.hasMore 没有更多数据了', this.hasMore);
          }
        }
      } catch (error) {
        console.error('加载订单失败:', error);
      } finally {
        uni.hideLoading();
        this.loading = false;
      }
    },
    // 监听滚动
    scroll: function (e: any) {
      this.old.scrollTop = e.detail.scrollTop
    },
    // scroll 触发
    loadMore() {
      if (!this.loading && this.hasMore) {
        console.log("loadMore-=-=-=-==", this.currentTabs)
        this.getOrdersDataList(this.currentTabs)
      }
    },
    // 头部选择
    tabsChange(event: any) {
      const {index: index} = event
      this.currentTabs = index + 2
      // 点击是, 全部返回有元生
      this.orderList = []
      this.current = 1
      this.hasMore = true
      // 解决view层不同步的问题
      this.scrollTop = this.old.scrollTop
      this.$nextTick(() => {
        this.scrollTop = 0
      });
      this.getOrdersDataList(index + 2, true)
    },
    // 跳转页面
    itemChange(id: number) {
      uni.navigateTo({url: `/pages/order/order_detail?id=${id}`})
    },
    // 点击退款
    onRefund(index: number) {
      const {id, created_at, total_amount} = this.orderList[index]
      if (!isMoreThanOneDay(created_at)) {
        uni.navigateTo({url: `/pages/order/refund_page?total_amount=${total_amount}&order_id=${id}`})
      } else {
        tips.toast(this.otherLang.refundTimeIsExceeded)
      }
    },
  },
})
</script>

<template>
  <view>
    <nav-bar :pageTitle="lang.page_name"/>
    <view :class="['margin-20', locale]">
      <u-sticky :customNavHeight="systemInfo.statusBarHeight + 56">
        <view class="radio-20 padding-20 bg-white zh-CN">
          <u-tabs :list="lang.tabsList" :scrollable="false" :lineWidth="28" :activeStyle="{ color: '#0186FF' }"
                  @click="tabsChange" :current="0"/>
        </view>
      </u-sticky>
      <view style="height: 20rpx"/>

      <scroll-view scroll-y class="scroll-view" @scrolltolower="loadMore" :scroll-top="scrollTop" @scroll="scroll">
        <!-- order-->
        <template v-if="orderList.length >= 1">
          <view v-for="(item, index) in orderList" :key="index">
            <view class="radio-20 padding-30 text-32 bg-white gap-20 flex-column" style="margin:20rpx 0 20rpx 0"
                  @click="itemChange(item.id)">
              <view class="flex-between">
                <view @longpress="copyFun(item.order_number)"> {{ item.order_number }}</view>

                <!-- 完成或退款标签-->
                <view
                    :class="['text-26 label', item.status === 3 ? 'treat_refunded' : (item.status === 4 ? 'refunded':'')]">
                  {{
                    lang[item.status === 2 ? 'complete' : (item.status === 3 ? 'treat_refunded' : (item.status === 4 ? 'refunded' : ''))]
                  }}
                </view>
              </view>

              <view style="background: #D4D4D4; height: 2rpx"/>

              <!-- 订单信息-->
              <view class="flex-center gap-20">
                <view :class="['padding-30 radio-20 center type', getTypeImage(item.ext)]">
                  <image :src="`/static/ext/${getTypeImage(item.ext)}.svg`"
                         style="width: 108rpx; height: 108rpx;"/>
                </view>

                <view class="text-32 column gap-20 flex-1">
                  <view class="flex-between">
                    <view class="color-grey">{{ lang.total }}</view>
                    <view>￥{{ getPrice(item.total_amount) }}</view>
                  </view>
                  <view class="flex-between">
                    <view class="color-grey">{{ lang.print_nums }}</view>
                    <view>{{ item.page }}x{{ item.paper_count }} {{ lang.print_page }}</view>
                  </view>
                  <view class="flex-between">
                    <view class="color-grey">{{ lang.print_time }}</view>
                    <view>{{ item.created_at }}</view>
                  </view>
                </view>
              </view>

              <!-- 退款-->
              <view class="flex-end text-26 gap-20" v-if="item.status == 2">
                <view :class="['tab-label', !isMoreThanOneDay(item.created_at)? 'preview-label':'']"
                      @click.stop="onRefund(index)">{{ lang.refund }}
                </view>
              </view>
            </view>
          </view>
          <!-- 底部提示-->
          <view class="margin-top-40 color-grey text-32 safe-area-padding" style="width: 100%;">
            <view v-if="loading" class="center gap-20">
              <u-loading-icon/>
              <view>{{ otherLang.loading }}</view>
            </view>
            <view v-if="!loading && !hasMore" class="flex-between">
              <view class="line-weight-30"/>
              <view>{{ otherLang.no_more }}</view>
              <view class="line-weight-30"/>
            </view>
          </view>
        </template>

        <!-- 空数据-->
        <view v-if="orderList.length <= 0" class="center" style="height: 60vh;">
          <u-empty
              mode="order"
              :width="240"
              :hidden="240"
              :textSize="22"
              :text="lang.empty"
              icon="http://cdn.uviewui.com/uview/empty/order.png"
          />
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.label {
  padding: 4px 7px;
  color: #00CB5B;
  background: #F0FFED;
  border-radius: 12rpx;
}

.tab-label {
  padding: 12rpx 24rpx;
  border-radius: 12rpx;
  border: 1rpx solid #CDCDCD;
}

.resources-image {
  width: 120rpx;
  height: 120rpx;
}

.treat_refunded {
  color: #F25050;
  background: #FFEDED;
}

.refunded {
  color: #F29750;
  background: #FFF7ED;
}

.preview-label {
  color: #0186FF;
  border: 1rpx solid #0060ff;
}
</style>